<template>
  <div>
    <div class="table">
      <div class="thead">
        <div class="tr">
          <div class="th">
            <span>排名</span>
          </div>
          <div class="th">服务业务</div>
          <div class="th">接待量</div>
          <div class="th">当前排队人数</div>
          <div class="th">当前叫号</div>
          <div class="th">预计等待时长</div>
          <div class="th">
            <span>满意度</span>
          </div>
        </div>
      </div>
      <div class="tbody">
        <LoopScroll :dataSource="tableData" itemKey="id" :speed="0.5">
          <template #default="{ item }">
            <div class="tr">
              <div class="td">{{ item.id }}</div>
              <div class="td">{{ item.serviceBusiness }}</div>
              <div class="td">{{ item.jiedailiang }}</div>
              <div class="td">
                {{ item.paiduirenshu }}
              </div>
              <div class="td">
                {{ item.jiaohao }}
              </div>
              <div class="td">{{ item.shichang }}</div>
              <div class="td">
                {{ item.manyidu }}
              </div>
            </div>
          </template>
        </LoopScroll>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import { LoopScroll } from "@joyday/vue-loop-scroll";

const emits = defineEmits([]);
const props = defineProps({});
const state = reactive({});
const tableData = ref(
  Array.from({ length: 20 }, (_, i) => ({
    serviceBusiness: "社保服务",
    jiedailiang: "一楼大厅窗口39",
    paiduirenshu: "10",
    jiaohao: "567",
    shichang: 12 + i + "min",
    manyidu: "4",
    id: i + 1,
  }))
);
onBeforeMount(() => {});
onMounted(() => {});
defineExpose({ state });
</script>
<style lang="scss" scoped>
.table {
  width: 952px;
  height: 286px;
  color: rgb(0, 101, 252);
  .tr {
    display: flex;
    justify-content: space-around;
  }
  .td,
  .th {
    text-align: center;
    flex: 1;
    line-height: 41px;
  }
  .th {
    font-family: "AlibabaPuHuiTi75";
    font-size: 15px;
    img {
      width: 14px;
      height: 12px;
    }
  }
  .td {
    font-family: "AlibabaPuHuiTi55";
    font-size: 15px;
    height: 41px;
  }
  .thead {
    height: 40px;
    background-color: rgba(39, 146, 229, 0.2);
    border: 1px solid rgba(191, 230, 255, 0.2);
    .tr {
      .th:first-child {
        width: 120px;
        position: relative;
        img {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 15px;
        }
      }
      .th:last-child {
        width: 120px;
        position: relative;
        img {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 15px;
        }
      }
    }
  }
  .tbody {
    height: 246px; /* 设置最大高度，根据需要调整 */
  }
  .tbody :deep(.scroll-loop-item) {
    &:nth-child(odd) {
      background-color: rgba(38, 118, 210, 0.05); // 奇数列背景色为红色
    }

    &:nth-child(even) {
      background-color: rgba(38, 118, 210, 0.15); // 偶数列背景色为蓝色
    }
  }
}
</style>
